<template>
	<view class="editAddress">
		<view class="edit_section">
			<text>收 货 人</text>
			<input placeholder='姓名' type='text' :value="receiver" @change="changename" />
		</view>
		<view class="edit_section">
			<text>手机号码</text>
			<input placeholder='11位手机号码' type='text' v-model="phone" maxlength='11' />
		</view>
		<!-- 三级地址渲染 -->
		<view class="edit">
			<view class="edit_left">所在地区</view>
			<view class="edit_right" @click="showPicker">
				<input type="text" v-model="value" placeholder="崔敏市 崔敏区 崔敏家">
				<view class="icon_section">></view>
			</view>
		</view>
		<view class="edit_section">
			<text>详细地址</text>
			<input placeholder='如楼号/单元/门牌号' type='text' v-model="values" />
			<!-- 地图选点 -->
			<view class="map" @click="goMap">
				<img src="../../../static/icons/dot.png" alt="" class="dot">
			</view>
		</view>
		<view class="save_btn_wrap" v-if="flag==1">
			<view class='save_btn'>
				<text @click="newAdd">保存收货地址</text>
			</view>
		</view>
		<view class="edit_btn_wrap" v-if="flag==2">
			<view class='save_btn'>
				<text @click="editAddr">保存收货地址</text>
			</view>
			<view class='del_btn'>
				<text @click="deletes">删除收货地址</text>
			</view>
		</view>



		<view class="mask" v-if="visible" @click="cancel">
			<view class="off">
				<text @click="cancel">确定</text>
			</view>
			<picker-view :value="ids" indicator-style="height: 40px;" class="pickerView" @change="changeItem">
				<picker-view-column>
					<view v-for="(item) in newAddress" :key="item.areaId">{{item.areaName}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item) in citiesList" :key="item.areaId">{{item.areaName}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item) in areaList" :key="item.areaId">{{item.areaName}}</view>
				</picker-view-column>
			</picker-view>
		</view>

	</view>
</template>

<script>
	import {
		get_newAddress,
		get_adds,
		delete_addr,
		edit_addr,
		get_address
	} from "../../../services/address"

	const chooseLocation = requirePlugin("chooseLocation");

	export default {
		data() {
			return {
				flag: 0, //判断保存地址和删除地址的按钮
				visible: false,
				newAddress: [], //省份
				citiesList: [], //市
				areaList: [],
				ids: [0, 0, 0], //用来存放省市区的id
				receiver: "", //收货人的值
				values: "", //详细地址的值
				value: "", //拼接 三级城市地址
				currentProvince: '', //当前地址 省
				currentCity: "", //当前 市
				currentArea: "", //当前 区
				phone: "", //手机号
				editObj: {}, //编辑数据，，
				addrId: 0

			}
		},
		async onLoad(options) {
			this.flag = options.flag;
			this.init(this.ids[0]);
			if (options.flag === "2") {
				this.editObj = JSON.parse(options.editObj)
				this.receiver = this.editObj.receiver
				this.phone = this.editObj.mobile
				this.value = this.editObj.province + this.editObj.city + this.editObj.area
				this.values = this.editObj.addr
				this.addrId = this.editObj.addrId
			}
		},
		// 获取到选点的位置
		onShow() {
			const location = chooseLocation.getLocation();
			this.values = location ? location.name : this.values
			console.log(this.values)
		},
		onUnload() {
			// 页面卸载时 设置选点结果为null 返回的信息还是上一次选择的位置
			chooseLocation.setLoacation && chooseLocation.setLoacation(null);
		},
		methods: {
			showPicker() {
				//弹窗
				this.visible = true;
			},
			async cancel() {
				this.visible = false;
			},
			async changeItem(e) {
				//更改默认选中的下标
				this.ids[0] = e.detail.value[0];
				//重新获取市区数据
				this.citiesList = await this.getCities(this.newAddress);
				if (this.citiesList.length === 1) this.ids[1] = 0
				else this.ids[1] = e.detail.value[1]
				this.areaList = await this.getArea(this.citiesList);
				if (this.areaList.length === 1) this.ids[2] = 0
				else this.ids[2] = e.detail.value[2]
				//拼接选中的城市
				// this.values = ''
				this.currentProvince = this.newAddress[this.ids[0]]
				this.currentCity = this.citiesList[this.ids[1]]
				this.currentArea = this.areaList[this.ids[2]]
				this.value = this.currentProvince.areaName + this.currentCity.areaName + this.currentArea.areaName
			},
			//收货人姓名
			async changename(e) {
				this.receiver = e.detail.value
			},
			// 获取 省 数据
			async init(pid) {
				const result = await get_newAddress({
					url: "/p/area/listByPid",
					data: {
						pid
					}
				}); //省
				const resultCities = await this.getCities(result); //市
				const resulArea = await this.getArea(resultCities) //区
				this.newAddress = [...result];
				this.citiesList = [...resultCities];
				this.areaList = [...resulArea];
			},
			//获取市区数据的方法
			async getCities(result) {
				return await get_newAddress({
					url: "/p/area/listByPid",
					data: {
						pid: result[this.ids[0]].areaId,
					},
				});
			},
			async getArea(result) {
				return await get_newAddress({
					url: "/p/area/listByPid",
					data: {
						pid: result[this.ids[1]].areaId,
					},
				});
			},
			// 添加地址
			async newAdd() {
				var that = this;
				var receiver = that.receiver;
				var mobile = that.phone;
				var addr = that.values;
				if (!receiver) {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: "none"
					})
					return;
				}
				if (!mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none"
					})
					return;
				}
				var regexp = /^[1]([3-9])[0-9]{9}$/;
				if (!regexp.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none"
					})
					return;
				}
				if (!addr) {
					uni.showToast({
						title: '请输入详细地址',
						icon: "none"
					})
					return;
				}
				const addrParam = {
					"addr": this.values,
					"addrId": 0,
					"area": this.currentArea.areaName, //区
					"areaId": this.currentArea.areaId,
					"city": this.currentCity.areaName, //市
					"cityId": this.currentCity.areaId,
					"mobile": this.phone,
					"province": this.currentProvince.areaName, //省
					"provinceId": this.currentProvince.areaId,
					"receiver": this.receiver,
				}
				let res = await get_adds({
					url: "/p/address/addAddr",
					method: "post",
					data: {
						...addrParam
					}
				})
				console.log(res, "添加地址+++数据");
				uni.navigateBack({
					delta: 1
				})
			},
			//删除地址
			async deletes() {
				const that = this;
				uni.showModal({
					content: '确定要删除此收货地址吗？',
					success: async function(res) {
						if (res.confirm) {
							const resdelete = await delete_addr({
								url: `/p/address/deleteAddr/${that.editObj.addrId }`,
								method: "delete",
							});
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			//编辑地址
			async editAddr() {
				console.log(this.addrId)
				const addrParam = {
					"addr": this.values,
					"addrId": this.addrId,
					"area": this.currentArea.areaName, //区
					"areaId": this.currentArea.areaId,
					"city": this.currentCity.areaName, //市
					"cityId": this.currentCity.areaId,
					"mobile": this.phone,
					"province": this.currentProvince.areaName, //省
					"provinceId": this.currentProvince.areaId,
					"receiver": this.receiver,
					"userType": 0
				}
				const resedit = await edit_addr({
					url: "/p/address/updateAddr",
					method: "PUT",
					data: {
						...addrParam
					}
				})

				console.log(resedit, "修改后的地址");

				let res = await get_address({
					url: "/p/address/list",
				});
				console.log(res, "收货地址获取数据");
				uni.navigateBack({
					delta: 1
				})
			},
			// 跳转地图选点
			goMap() {

				const key = "2RTBZ-PPJ6J-D2WFU-FR5VQ-723G2-3AB34"; // 使用腾讯位置服务申请的key
				const referer = "幕鱼小店"; //调用插件的小程序app的app名称
				const location = JSON.stringify({ //地图上的点  设置中心点
					latitude: 39.89631551,
					longitude: 116.323459711
				});
				const category = "生活服务,娱乐休闲";

				//跳转到地图插件页面
				uni.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
				})
			},
		}
	}
</script>

<style scoped>
	@import "./index.css";
</style>
